<template>
  <el-table :data="mySties" stripe style="width: 100%">
    <!-- <el-table-column prop="time" label="添加时间" /> -->
    <el-table-column fixed prop="available" label="状态" width="150">
      <template #default="scope">
        <el-button text :type="scope.row.available ? 'success' : 'danger'" @click="enableSite(scope.$index, scope.row)"> {{ scope.row.available ? '已启用' : '已关闭' }} </el-button>
      </template>
    </el-table-column>
    <el-table-column prop="siteName" label="站点" />
    <el-table-column prop="hotRankList" label="hotRankList" />
    <el-table-column prop="parseType" label="解析模式" />
    <el-table-column prop="url" label="url" show-overflow-tooltip />
    <el-table-column label="操作">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="siteDetail(scope.$index, scope.row)">详情</el-button>
        <el-button link type="primary" size="small" @click="siteDel(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-dialog v-model="dialogVisible" title="站点详情" width="30%">
    <SiteConfig v-if="dialogVisible" :site="currentSite"></SiteConfig>

    <template #footer>
      <span>
        <el-button @click="closeDetail">取消</el-button>
        <el-button type="primary" @click="closeDetail">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { getMySite, saveSite, delSite } from '@/api/u/manager.js'
import { reactive, ref, computed } from 'vue'
import SiteConfig from './SiteConfig.vue'

const dialogVisible = ref(false)

const mySties = reactive([])
let currentSite = ref({})

const siteInit = () => {
  getMySite()
    .then((result) => {
      mySties.length = 0
      result.forEach((e) => {
        mySties.push(e)
      })

      console.log(result)
    })
    .catch((err) => {})
}
siteInit()

const siteDetail = function (index, row) {
  dialogVisible.value = true
  currentSite.value = reactive(row)
  console.log(currentSite, index)
}

const siteEdit = (index, row) => {
  console.log(index, row)
}

const closeDetail = () => {
  dialogVisible.value = false
}

const enableSite = (index, row) => {
  row.available = !row.available
  saveSite(row)
    .then((result) => {})
    .catch((err) => {})
}

const siteDel = (idx, row) => {
  delSite(row)
    .then((result) => {
      // refresh
      siteInit()
    })
    .catch((err) => {})
}
</script>

<style></style>
